<template>
  <div class="quality-comparison">
    <div class="content">
      <!-- 页面标题 -->
      <div class="页面标题">
        <h1>数据可视化对比</h1>
        <p>本页面展示了天气信息、小麦品质和矿物质含量的数据分析图表</p>
      </div>
      
      <!-- 筛选工具栏 -->
      <div class="筛选工具栏">
        <div class="筛选组">
          <span>年份：</span>
          <el-select v-model="已选年份" placeholder="选择年份">
            <el-option label="2022" value="2022"></el-option>
            <el-option label="2023" value="2023"></el-option>
            <el-option label="2024" value="2024"></el-option>
          </el-select>
        </div>
        
        <div class="筛选组">
          <span>地区：</span>
          <el-select v-model="已选地区" placeholder="选择地区">
            <el-option label="华北地区" value="华北"></el-option>
            <el-option label="华东地区" value="华东"></el-option>
            <el-option label="华南地区" value="华南"></el-option>
            <el-option label="西北地区" value="西北"></el-option>
            <el-option label="西南地区" value="西南"></el-option>
            <el-option label="东北地区" value="东北"></el-option>
            <el-option label="全国" value="全国"></el-option>
          </el-select>
        </div>
        
        <div class="筛选组">
          <span>对比类型：</span>
          <el-radio-group v-model="对比类型">
            <el-radio-button label="年份对比">年份对比</el-radio-button>
            <el-radio-button label="地区对比">地区对比</el-radio-button>
          </el-radio-group>
        </div>
        
        <div class="筛选操作">
            <el-button type="primary" @click="应用筛选">应用筛选</el-button>
            <el-button @click="重置筛选">重置</el-button>
          </div>
      </div>
      
      <!-- 数据分析摘要 -->
      <div class="数据摘要">
        <h3 class="摘要标题">数据分析摘要</h3>
        <div class="摘要内容">
          <p>根据最近的数据分析，<strong>{{已选年份}}</strong>年的小麦品质总体表现<strong>{{整体品质趋势}}</strong>，
            <strong>{{已选地区名称}}</strong>地区的小麦产量较去年增长了<strong>{{产量增长率}}</strong>。
            天气条件对小麦生长的影响主要体现在<strong>{{天气影响因素}}</strong>方面。</p>
          <p>矿物质含量分析显示，本年度小麦的<strong>{{突出矿物质}}</strong>含量显著高于往年，这可能与土壤改良措施有关。</p>
        </div>
      </div>
      
      <!-- 图表展示区域 -->
      <div class="图表容器">
        <!-- 天气信息图表 -->
        <div class="图表区域">
          <div class="图表标题">
            <h3><el-icon><DataAnalysis /></el-icon> 天气信息分析</h3>
            <p class="图表描述">展示了温度、降水量、日照时长等关键气象数据的变化趋势</p>
          </div>
          <WeatherChart :year="已选年份" :region="已选地区" />
        </div>
        
        <!-- 小麦品质图表 -->
        <div class="图表区域">
          <div class="图表标题">
            <h3><el-icon><Medal /></el-icon> 小麦品质分析</h3>
            <p class="图表描述">展示了蛋白质含量、湿面筋含量、沉降值等品质指标的雷达图</p>
          </div>
          <WheatQualityChart :year="已选年份" :region="已选地区" />
        </div>
        
        <!-- 矿物质含量图表 -->
        <div class="图表区域">
          <div class="图表标题">
            <h3><el-icon><Coordinate /></el-icon> 矿物质含量分析</h3>
            <p class="图表描述">展示了不同产地小麦的矿物质含量热力图对比</p>
          </div>
          <MineralContentChart :year="已选年份" :region="已选地区" />
        </div>
      </div>
      
      <!-- 数据洞察与建议 -->
      <div class="洞察区域">
        <h3 class="区域标题">数据洞察与建议</h3>
        <div class="洞察网格">
          <div class="洞察卡片">
            <div class="洞察图标">
              <el-icon><LightbulbOn /></el-icon>
            </div>
            <h4>天气影响洞察</h4>
            <p>根据数据分析，小麦生长期的温度和降水量是影响产量的关键因素。建议根据天气预报调整灌溉计划。</p>
          </div>
          
          <div class="洞察卡片">
            <div class="洞察图标">
              <el-icon><Coin /></el-icon>
            </div>
            <h4>品质提升建议</h4>
            <p>增加土壤中钾元素的含量可以显著提高小麦的蛋白质含量和湿面筋含量。建议在种植前进行土壤检测和改良。</p>
          </div>
          
          <div class="洞察卡片">
            <div class="洞察图标">
              <el-icon><Warning /></el-icon>
            </div>
            <h4>风险预警</h4>
            <p>根据历史数据，未来两个月可能出现干旱天气，建议提前做好灌溉准备和水源管理。</p>
          </div>
        </div>
      </div>
      
      <!-- 数据导入功能 -->
      <div class="数据导入区域">
        <el-divider content-position="left">数据导入</el-divider>
        <div class="按钮容器">
          <el-upload
            class="上传示例"
            action=""
            :auto-upload="false"
            :on-change="处理文件变化"
              :before-upload="上传前检查"
            multiple
          >
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持上传 CSV、Excel 文件，用于更新数据图表
              </div>
            </template>
          </el-upload>
          
          <el-button type="success" style="margin-top: 10px;" @click="导入数据">导入数据</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WeatherChart from '../components/WeatherChart.vue'
import WheatQualityChart from '../components/WheatQualityChart.vue'
import MineralContentChart from '../components/MineralContentChart.vue'
import { DataAnalysis, Medal, Coordinate, LightbulbOn, Coin, Warning } from '@element-plus/icons-vue'

export default {
  name: '品质对比',
  components: {
    WeatherChart,
    WheatQualityChart,
    MineralContentChart,
    DataAnalysis,
    Medal,
    Coordinate,
    LightbulbOn,
    Coin,
    Warning
  },
  props: {
    数据: {
      type: [Object, Array],
      default: null
    }
  },
  data() {
    return {
      已选文件: [],
      已选年份: '2023',
      已选地区: '华北',
      对比类型: '年份对比',
      // 模拟分析数据
      整体品质趋势: '良好',
      产量增长率: '12.5%',
      天气影响因素: '降水量和温度',
      突出矿物质: '锌'
    }
  },
  computed: {
    已选地区名称() {
      const 地区映射 = {
        '华北': '华北地区',
        '华东': '华东地区',
        '华南': '华南地区',
        '西北': '西北地区',
        '西南': '西南地区',
        '东北': '东北地区',
        '全国': '全国'
      }
      return 地区映射[this.已选地区] || '全国'
    }
  },
  methods: {
    处理文件变化(file, fileList) {
      this.已选文件 = fileList
    },
    上传前检查(file) {
      // 检查文件类型
      const isCSV = file.type === 'text/csv'
      const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const isLt2M = file.size / 1024 / 1024 < 2
      
      if (!isCSV && !isExcel) {
        this.$message.error('只支持CSV和Excel文件格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('文件大小不能超过2MB!')
        return false
      }
      return true
    },
    导入数据() {
      if (this.已选文件.length === 0) {
        this.$message.warning('请先选择要上传的文件')
        return
      }
      
      // 这里应该是与后端交互的逻辑，但现在只做前端展示
      this.$message.success('数据导入成功！图表将根据新数据更新')
      
      // 清空选择的文件
      this.已选文件 = []
    },
    应用筛选() {
      // 根据筛选条件更新图表数据
      this.$message.success('筛选条件已应用，图表数据已更新')
      // 更新分析数据
      this.更新分析数据()
    },
    重置筛选() {
      this.已选年份 = '2023'
      this.已选地区 = '华北'
      this.对比类型 = 'yearly'
      this.$message.info('筛选条件已重置')
      this.更新分析数据()
    },
    更新分析数据() {
      // 根据选择的年份和地区更新分析数据
      // 这里使用模拟数据，实际应用中应该从API获取
      const trends = ['良好', '优秀', '稳定', '略有下降']
      const rates = ['12.5%', '8.3%', '15.7%', '6.2%']
      const factors = ['降水量和温度', '日照时长', '昼夜温差', '空气质量']
      const minerals = ['锌', '铁', '钾', '磷', '镁']
      
      // 随机选择数据以模拟更新
      this.整体品质趋势 = trends[Math.floor(Math.random() * trends.length)]
      this.产量增长率 = rates[Math.floor(Math.random() * rates.length)]
      this.天气影响因素 = factors[Math.floor(Math.random() * factors.length)]
      this.突出矿物质 = minerals[Math.floor(Math.random() * minerals.length)]
    }
  },
  mounted() {
    // 初始化分析数据
    this.更新分析数据()
  }
}
</script>

<style scoped>
.quality-comparison {
  min-height: 100vh;
  background: #f5f7fa;
}

.content {
  padding: 2rem 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.页面标题 {
  text-align: center;
  margin-bottom: 2rem;
}

.页面标题 h1 {
  color: #1890ff;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.页面标题 p {
  color: #666;
  font-size: 1.2rem;
  margin-bottom: 0;
}

.筛选工具栏 {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.筛选组 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.数据摘要 {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.摘要标题 {
  color: #1890ff;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.摘要内容 p {
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
  text-align: left;
}

.图表容器 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
}

.图表区域 {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.图表标题 {
  margin-bottom: 1.5rem;
}

.图表标题 h3 {
  color: #1890ff;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.图表描述 {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.洞察区域 {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.区域标题 {
  color: #1890ff;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.洞察网格 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.洞察卡片 {
  background: white;
  border-radius: 6px;
  padding: 1.5rem;
  border-left: 4px solid #1890ff;
}

.洞察图标 {
  font-size: 1.8rem;
  color: #1890ff;
  margin-bottom: 1rem;
}

.洞察卡片 h4 {
  color: #333;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}

.洞察卡片 p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
  text-align: left;
}

.数据导入区域 {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.按钮容器 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 200px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .筛选工具栏 {
    flex-direction: column;
    align-items: stretch;
  }
  
  .筛选组 {
    flex-direction: column;
    align-items: stretch;
  }
  
  .图表容器 {
    gap: 1.5rem;
  }
  
  .洞察网格 {
    grid-template-columns: 1fr;
  }
  
  .按钮容器 {
    max-width: 100%;
  }
}
</style>
